<template>
	<view class="lock-container">
		<!-- 实时视频区域（可选，显示第一个设备的视频） -->
		<view class="video-section" v-if="devices.length">
			<image class="video-placeholder" src="/static/door-video-placeholder.png" mode="aspectFill"/>
			<view class="video-mask">实时监控（{{ devices[0].name }}）</view>
		</view>

		<!-- 多个设备信息卡片 -->
		<view
			v-for="(device, idx) in devices"
			:key="device.id"
			class="device-info"
		>
			<view class="device-row">
				<view class="device-title">{{ device.deviceName }}</view>
				<view class="device-status" :class="device.status === 0 ? 'online' : 'offline'">
					{{ device.status === 0 ? '在线' : '离线' }}
				</view>
				<view class="device-id">设备编号：{{ device.deviceSn }}</view>
			</view>
			<button
					class="unlock-btn-inline"
					:disabled="device.status !== 0"
					@tap="goToFaceRecognition(device)"
				>
					<uni-icons type="locked" size="30" color="#fff"></uni-icons>
					{{ device.status === 0 ? '开门' : '设备离线' }}
			</button>
		</view>
	</view>
</template>

<script>
	import { request } from '@/util/request';
	export default {
		data() {
			return {
				devices: []
			}
		},
		onLoad() {
			// 监听开门成功事件
			uni.$on('unlock-success', this.handleUnlockSuccess);
		},
		onUnload() {
			// 移除事件监听
			uni.$off('unlock-success', this.handleUnlockSuccess);
		},
		methods: {
			goToFaceRecognition(device) {
				if (device.status !== 0) return;
				// 跳转到人脸识别页面，并传递设备信息
				uni.navigateTo({
					url: `/pages/face-recognition/face-recognition?device=${encodeURIComponent(JSON.stringify(device))}`
				});
			},
			handleUnlockSuccess(device) {
				uni.showLoading({ title: '正在开门...' });
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: `${device.name} 开门成功`,
						icon: 'success'
					});
				}, 1500);
			},
			getBuildingNumber(device) {
				// 假设格式为"1号楼 1单元门口机"
				const match = device.name.match(/(\d+)号楼/);
				return match ? match[0] : '';
			},
			async getDevices() {
				const res = await request({
					url: 'opencv-server/opencv/accessDevice/all',
					method: 'GET'
				});
				if (res.code === 200) {
					this.devices = res.data;
				}
			}
		},
		onLoad() {
			this.getDevices();
		}
	}
</script>

<style>
	.lock-container {
		min-height: 100vh;
		background: #f6f8fa;
		padding: 0 0 60rpx 0;
	}
	.video-section {
		position: relative;
		width: 90vw;
		height: 340rpx;
		margin: 40rpx auto 0 auto;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(74,144,226,0.10);
		background: #000;
	}
	.video-placeholder {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.video-mask {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		background: rgba(0,0,0,0.35);
		color: #fff;
		font-size: 26rpx;
		padding: 10rpx 0;
		text-align: center;
		letter-spacing: 2rpx;
	}
	.device-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 12rpx auto 12rpx auto;
		width: 90vw;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.05);
		padding: 12rpx 24rpx 12rpx 24rpx;
		text-align: center;
		position: relative;
	}
	.device-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	.device-status {
		display: inline-block;
		font-size: 22rpx;
		padding: 4rpx 18rpx;
		border-radius: 16rpx;
		margin-bottom: 8rpx;
	}
	.device-status.online {
		background: #e6f9e6;
		color: #1aad19;
	}
	.device-status.offline {
		background: #ffeaea;
		color: #e64340;
	}
	.device-desc {
		font-size: 24rpx;
		color: #888;
		margin-bottom: 4rpx;
	}
	.device-row {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		margin-left: 12rpx;
		margin-right: 100rpx;
	}
	.device-id {
		font-size: 20rpx;
		color: #bbb;
		text-align: center;
	}
	.unlock-btn-inline {
		width: 300rpx;
		height: 120rpx;
		border-radius: 30rpx;
		background: linear-gradient(135deg, #4A90E2 0%, #87CEEB 100%);
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(74,144,226,0.12);
		border: none;
		padding: 0 28rpx;
	}
	.unlock-btn-inline:disabled {
		background: #ccc;
		color: #fff;
	}
	.icon-unlock {
		font-size: 36rpx;
		margin-right: 8rpx;
	}
</style>
